<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="zh-CN">
<head>
<meta charset="GB18030">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/main.css">
<style>
.tree li {
	list-style-type: none;
	cursor: pointer;
}

table tbody tr:nth-child(odd) {
	background: #F4F4F4;
}

table tbody td:nth-child(even) {
	color: #C00;
}
</style>
</head>

<body>

	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<div>
					<a class="navbar-brand" style="font-size: 32px;" href="#">首页</a>
				</div>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">

					<li style="padding-top: 8px; margin-left: 10px; padding-top: 8px;">
						<div class="btn-group">
							<button type="button"
								class="btn btn-default btn-success dropdown-toggle"
								data-toggle="dropdown">欢迎用户：${sessionScope.login_user.userName}</button>
						</div>
					</li>

					<li style="margin-left: 10px; padding-top: 8px;">
						<button type="button" class="btn btn-danger"
							style="float: right; margin-left: 10px;"
							onclick="location.href='${pageContext.request.contextPath}/exit'">
							<i class=" glyphicon glyphicon-remove"></i> 安全退出
						</button>

					</li>
				</ul>

			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<div class="tree">
					<ul style="padding-left: 0px;" class="list-group">
						<li class="list-group-item tree-closed"><a href="#"><i
								class="glyphicon glyphicon-dashboard"></i> 车辆管理系统</a></li>
						<c:forEach items="${sessionScope.loginPers}" var="per">
							<c:if test="${per.pmPid==1}">
								<li class="list-group-item tree-closed"><span><i
										class="glyphicon glyphicon glyphicon-tasks"></i> ${per.pmName}
								</span>
								<c:if test="${per.pmId==4}">
									<ul style="margin-top: 10px;">
									</c:if>
								<c:if test="${per.pmId!=4}">
									<ul style="margin-top: 10px; display: none;">
									</c:if>
										<c:forEach items="${sessionScope.loginPers}" var="per2">
											<c:if test="${per2.pmPid==per.pmId}">
												<li style="height: 30px;"><a href="${pageContext.request.contextPath}/${per2.pmGoto}"
													target="ifs"><i class="glyphicon glyphicon-user"></i>
														${per2.pmName}</a></li>
											</c:if>
										</c:forEach>
									</ul></li>
							</c:if>
						</c:forEach>


					</ul>
				</div>

			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<iframe name="ifs" width="100%" height="600px" frameborder="0">


				</iframe>

			</div>
		</div>
	</div>

	<script
		src="${pageContext.request.contextPath}/static/jquery/jquery-2.1.1.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/static/script/docs.min.js"></script>
	<script type="text/javascript">
		$(function() {

			$(".list-group-item span").click(function() {
				// jquery对象的回调方法中的this关键字为DOM对象
				// $(DOM) ==> JQuery

				if ($(this).parent().find("ul")) { // 3 li
					$(this).parent().toggleClass("tree-closed");
					if ($(this).parent().hasClass("tree-closed")) {
						$(this).parent().find("ul").hide("fast");
					} else {
						$(this).parent().find("ul").show("fast");
					}
				}
			});
		});
	</script>
</body>
</html>
